import React, { Component } from "react";
import "./toast.less";
import ToastItem from "./ToastItem";

let id = 0;
interface IState {
  list: { id: number; content: string; type: string }[];
}

export default class ToastRoot extends Component<any, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      list: [],
    };
  }
  render() {
    return (
      <div className="t-root">
        {this.state.list.map((item) => {
          return (
            <ToastItem
              item={item}
              key={item.content}
              onTimeout={this.del.bind(this)}
            />
          );
        })}
      </div>
    );
  }
  add(content: string, type: string) {
    this.state.list.push({ content, type, id: id++ });
    this.setState({});
  }
  del(id: number) {
    let index = this.state.list.findIndex((item) => item.id == id);
    if (index >= 0) {
      this.state.list.splice(index, 1);
      this.setState({});
    }
  }
}
